<template>
  <div class="edu-page-warp">
    <el-card shadow="never" class="check-result">
      <section>
        <div class="eva-check-title">
          <span v-if="pageFrom">统计</span>
          <span v-else>{{ typeTitle }}</span>
        </div>
      </section>

      <section>
        <div class="check-result-title">{{ checkData.questionnaireTitle }}</div>
        <div class="text-center">
          {{ checkData.introduction }}
        </div>
      </section>

      <section v-if="!ifProcess">
        <div class="total-score-container" v-if="!pageFrom">
          <div class="line-height30">总分：</div>
          <div class="total-score">{{ checkData.score }}</div>
        </div>
      </section>

      <section>
        <div v-for="(item, index) in checkData.questionList" :key="index" style="margin-bottom: 20px;">
          <div class="question-title">
            <div class="index-container">{{index+1}}</div>
            <div>&nbsp;&nbsp;{{item.title}}&nbsp;</div>
            <div>
              <template v-if="item.titleType === 1">
                {{`【单选题】`}}
              </template>
              <template v-if="item.titleType === 2">
                {{`【多选题】`}}
              </template>
              <template v-if="item.titleType === 3">
                {{`【问答题】`}}
              </template>
            </div>
            <div v-if="item.weight > 0 && !ifProcess && ifEvaAdmin">
              {{`（${item.weight}%）`}}
            </div>
          </div>
          <!-- 单选、多选表格 -->
          <table v-if="item.titleType !== 3" class="classTable" cellpadding="0" cellspacing="0">
            <tr>
              <td style="width: 60%;">选项</td>
              <td style="width: 10%;">小计</td>
              <td style="width: 30%;">比例</td>
            </tr>
            <tr v-for="(item1, index1) in item.options" :key="index1">
              <td>{{`${item1.option}.  ${item1.des}`}}</td>
              <td>{{`${item1.total}`}}</td>
              <td>
                <el-progress
                  v-if="item.fillInNum > 0"
                  :percentage="((item1.total/item.fillInNum)*100).toFixed(1)"
                  :format="format">
                </el-progress>
                <el-progress
                  v-else
                  :percentage="0"
                  :format="format">
                </el-progress>
              </td>
            </tr>
            <tr>
              <td>本题有效填写人次</td>
              <td>{{item.fillInNum}}</td>
              <td></td>
            </tr>
          </table>
          <!-- 问答表格 -->
          <table v-else class="classTable" cellpadding="0" cellspacing="0">
            <tr v-for="(item1, index1) in item.answer" :key="index1">
              <td v-if="item1 && item1 !== '无' && item1.trim() !== '' && item1 !== '' && item1 !== null" style="width: 18%;word-break : break-all;">
                <div style="text-overflow:ellipsis;overflow:hidden;text-overflow:ellipsis;white-space:wrap;">
                  {{`${index1+1}）${item1.substr(0,100)}`}}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </section>
    </el-card>
  </div>
</template>
<script>
import courseEvaluationApi from 'common/src/api/teachingEvaluation/courseEvaluation'
export default {
  props: {
    checkData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    ifProcess: {
      type: Boolean,
      default: false
    },
    pageFrom: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      typeTitle: '查看',
      ifEvaAdmin: false
    }
  },
  created() {
    this.judgeIfShowWeight()
  },
  methods: {
    judgeIfShowWeight() {
      courseEvaluationApi.judgeIfEvaAdmin().then(res => {
        console.log('res', res)
        if (res.data !== 1) {
          this.ifEvaAdmin = false
        } else {
          this.ifEvaAdmin = true
        }
      })
    }
  },
  watch: {
    checkData: {
      handler: (value)=> {
        // console.log('value', value)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss">
.check-result {
  .eva-check-title {
    font-size: 16px;
  }
  .check-result-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
  }
  .text-center {
    text-align: center;
    color: #999;
  }
  .total-score-container {
    display: flex;
    margin: 20px 0;
    .line-height30 {
      line-height: 30px;
    }
    .total-score {
      font-size: 24px;
      font-weight: bold;
    }
  }
  .question-title {
    display: flex;
    align-items: middle;
    font-size: 14px;
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 10px;
    .index-container {
      width: 36px;
      height: 36px;
      font-size: 16px;
      line-height: 36px;
      background: #E2ECFC;
      text-align: center;
      border-radius: 50%;
    }
  }
  .classTable{
      &.noPoint td{
        cursor: default;
        width: auto;
      }
      border: solid 1px #9c9c9c;
      border-right: 0px;
      border-bottom: 0px;
      width: 100%;
      text-align: left;
      td{
        border: solid 1px #9c9c9c;
        border-top: 0px;
        border-left: 0px;
        padding: 8px;
        width: 100px;
        cursor: pointer;
        span {
          display: inline-block;
          overflow: hidden;
        }
        .el-progress-bar {
          margin-right: -60px;
        }
      }
      td.bgGray {
        background: #e0e0e0;
      }
      td.seletedClass{
        background: yellow;
      }
      td.seletedClass.preSeletedClass{
        background: #b7b7f9;
      }
      td.preSeletedClass{
        background: #89ffde;
        // animation:myfirst 3s linear 1s infinite alternate;
      }
      td.disable {
        cursor: not-allowed;
      }
    }
}
</style>
